<template>
  <div class="auth-container">
    <div class="auth-background">
      <div class="background-overlay"></div>
      <div class="math-formulas">
        <div class="formula formula-1">π = 3.14159...</div>
        <div class="formula formula-2">E = mc²</div>
        <div class="formula formula-3">∫₀^∞ e^(-x²) dx</div>
        <div class="formula formula-4">a² + b² = c²</div>
        <div class="formula formula-5">∑ᵢ₌₁ⁿ i = n(n+1)/2</div>
        <div class="formula formula-6">f(x) = x² + 2x + 1</div>
        <div class="formula formula-7">lim[x→∞] (1 + 1/x)^x = e</div>
        <div class="formula formula-8">√(x² + y²)</div>
        <div class="formula formula-9">sin²θ + cos²θ = 1</div>
        <div class="formula formula-10">∇f = (∂f/∂x, ∂f/∂y, ∂f/∂z)</div>
        <div class="formula formula-11">α + β = γ</div>
        <div class="formula formula-12">∞</div>
        <div class="formula formula-13">x = (-b ± √(b²-4ac))/2a</div>
        <div class="formula formula-14">∂²u/∂t² = c²∇²u</div>
        <div class="formula formula-15">P(A∩B) = P(A)P(B|A)</div>
        
        <!-- 数学符号装饰 -->
        <div class="math-symbol symbol-1">π</div>
        <div class="math-symbol symbol-2">∑</div>
        <div class="math-symbol symbol-3">∫</div>
        <div class="math-symbol symbol-4">∞</div>
        <div class="math-symbol symbol-5">√</div>
        <div class="math-symbol symbol-6">α</div>
        <div class="math-symbol symbol-7">β</div>
        <div class="math-symbol symbol-8">θ</div>
        <div class="math-symbol symbol-9">Δ</div>
        <div class="math-symbol symbol-10">∇</div>
      </div>
    </div>
    
    <div class="auth-card find-password-card">
      <div class="auth-header">
        <div class="logo-section">
          <div class="logo-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
              <path d="M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10A2,2 0 0,1 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z"/>
            </svg>
          </div>
          <div class="logo-text">
            <h1>找回密码</h1>
            <p v-if="step === 1">验证您的邮箱地址</p>
            <p v-else-if="step === 2">设置新密码</p>
            <p v-else>密码重置成功</p>
          </div>
        </div>
      </div>

      <!-- 步骤指示器 -->
      <div class="step-indicator">
        <div class="step-item" :class="{ active: step >= 1, completed: step > 1 }">
          <div class="step-circle">
            <span v-if="step > 1">✓</span>
            <span v-else>1</span>
          </div>
          <span class="step-label">验证邮箱</span>
        </div>
        <div class="step-line" :class="{ active: step >= 2 }"></div>
        <div class="step-item" :class="{ active: step >= 2, completed: step > 2 }">
          <div class="step-circle">
            <span v-if="step > 2">✓</span>
            <span v-else>2</span>
          </div>
          <span class="step-label">重置密码</span>
        </div>
        <div class="step-line" :class="{ active: step >= 3 }"></div>
        <div class="step-item" :class="{ active: step >= 3 }">
          <div class="step-circle">3</div>
          <span class="step-label">完成</span>
        </div>
      </div>

      <div class="auth-form">
        <!-- 邮箱验证步骤 -->
        <div v-if="step === 1" class="step-content">
          <div class="form-group">
            <label class="form-label">邮箱地址</label>
            <div class="input-wrapper">
              <input 
                type="email" 
                v-model="email" 
                class="form-input"
                placeholder="请输入您的注册邮箱"
                required
              >
              <div class="input-icon">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z"/>
                </svg>
              </div>
            </div>
          </div>
          <button @click="verifyEmail" class="auth-button primary" :disabled="loading">
            <span v-if="loading">验证中...</span>
            <span v-else>验证邮箱</span>
            <div class="button-overlay"></div>
          </button>
        </div>
        
        <!-- 重置密码步骤 -->
        <div v-if="step === 2" class="step-content">
          <div class="user-info-card">
            <div class="user-avatar">
              <img :src="userInfo.avatar || defaultAvatar" alt="用户头像">
            </div>
            <div class="user-details">
              <h3>{{ userInfo.username }}</h3>
              <p>{{ userInfo.email }}</p>
            </div>
          </div>
          
          <div class="form-group">
            <label class="form-label">新密码</label>
            <div class="input-wrapper">
              <input 
                :type="showPassword ? 'text' : 'password'" 
                v-model="newPassword" 
                class="form-input"
                placeholder="请输入新密码"
                required
              >
              <div class="input-icon">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10A2,2 0 0,1 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z"/>
                </svg>
              </div>
              <button type="button" class="password-toggle" @click="showPassword = !showPassword">
                <svg v-if="showPassword" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/>
                  <line x1="1" y1="1" x2="23" y2="23"/>
                </svg>
                <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                  <circle cx="12" cy="12" r="3"/>
                </svg>
              </button>
            </div>
          </div>
          
          <div class="form-group">
            <label class="form-label">确认密码</label>
            <div class="input-wrapper">
              <input 
                :type="showConfirmPassword ? 'text' : 'password'" 
                v-model="confirmPassword" 
                class="form-input"
                placeholder="请再次输入新密码"
                required
              >
              <div class="input-icon">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z"/>
                </svg>
              </div>
              <button type="button" class="password-toggle" @click="showConfirmPassword = !showConfirmPassword">
                <svg v-if="showConfirmPassword" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/>
                  <line x1="1" y1="1" x2="23" y2="23"/>
                </svg>
                <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                  <circle cx="12" cy="12" r="3"/>
                </svg>
              </button>
            </div>
          </div>
          
          <div class="password-strength">
            <div class="strength-bar" :class="{
              'weak': strength === 1, 
              'medium': strength === 2, 
              'strong': strength === 3
            }">
              <div class="strength-fill" :style="{ width: (strength * 33.33) + '%' }"></div>
            </div>
            <div class="strength-label">{{ strengthText }}</div>
          </div>
          
          <div class="password-requirements">
            <h4>密码要求：</h4>
            <ul>
              <li :class="{'valid': newPassword.length >= 8}">
                <span class="requirement-icon">{{ newPassword.length >= 8 ? '✓' : '•' }}</span>
                至少8个字符
              </li>
              <li :class="{'valid': /[A-Z]/.test(newPassword)}">
                <span class="requirement-icon">{{ /[A-Z]/.test(newPassword) ? '✓' : '•' }}</span>
                包含大写字母
              </li>
              <li :class="{'valid': /[0-9]/.test(newPassword)}">
                <span class="requirement-icon">{{ /[0-9]/.test(newPassword) ? '✓' : '•' }}</span>
                包含数字
              </li>
              <li :class="{'valid': /[^A-Za-z0-9]/.test(newPassword)}">
                <span class="requirement-icon">{{ /[^A-Za-z0-9]/.test(newPassword) ? '✓' : '•' }}</span>
                包含特殊字符
              </li>
            </ul>
          </div>
          
          <div class="action-group">
            <button @click="step = 1" class="auth-button secondary">
              <span>返回上一步</span>
            </button>
            <button @click="updatePassword" class="auth-button primary" :disabled="loading">
              <span v-if="loading">更新中...</span>
              <span v-else>确认修改</span>
              <div class="button-overlay"></div>
            </button>
          </div>
        </div>
        
        <!-- 成功消息 -->
        <div v-if="step === 3" class="success-content">
          <div class="success-animation">
            <div class="success-icon">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                <path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"/>
              </svg>
            </div>
          </div>
          <h2>密码修改成功！</h2>
          <p>您的密码已成功更新，请使用新密码登录系统</p>
          <button @click="goToLogin" class="auth-button primary">
            <span>返回登录</span>
            <div class="button-overlay"></div>
          </button>
        </div>
        
        <!-- 错误提示 -->
        <div v-if="errorMessage" class="error-message">
          <div class="error-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
              <path d="M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"/>
            </svg>
          </div>
          {{ errorMessage }}
        </div>
      </div>

      <div class="auth-footer">
        <p>想起密码了？<router-link to="/login">返回登录页面</router-link></p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'

const router = useRouter()

// 默认头像
const defaultAvatar = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')

// 步骤控制
const step = ref(1)
const email = ref('')
const newPassword = ref('')
const confirmPassword = ref('')
const userInfo = ref({})
const errorMessage = ref('')
const strength = ref(0)
const showPassword = ref(false)
const showConfirmPassword = ref(false)
const loading = ref(false)

// 密码强度文本
const strengthText = computed(() => {
  if (strength.value === 0) return '密码强度'
  if (strength.value === 1) return '弱'
  if (strength.value === 2) return '中等'
  if (strength.value === 3) return '强'
  return ''
})

// 监听密码变化计算强度
watch(newPassword, (value) => {
  if (!value) {
    strength.value = 0
    return
  }
  
  let score = 0
  if (value.length >= 8) score += 1
  if (/[A-Z]/.test(value)) score += 1
  if (/[0-9]/.test(value)) score += 1
  if (/[^A-Za-z0-9]/.test(value)) score += 1
  
  strength.value = Math.min(Math.floor(score), 3)
})

// 验证邮箱
const verifyEmail = async () => {
  if (!email.value) {
    errorMessage.value = '请输入邮箱地址'
    return
  }
  
  if (!validateEmail(email.value)) {
    errorMessage.value = '请输入有效的邮箱地址'
    return
  }
  
  try {
    errorMessage.value = ''
    loading.value = true
    const response = await axios.get('/userpro/findByEmail', {
      params: { email: email.value }
    })
    
    if (response.data) {
      userInfo.value = response.data
      step.value = 2
    } else {
      errorMessage.value = '未找到该邮箱对应的用户'
    }
  } catch (error) {
    if (error.response) {
      if (error.response.status === 404) {
        errorMessage.value = '未找到该邮箱对应的用户'
      } else {
        errorMessage.value = '验证邮箱时发生错误: ' + error.response.data
      }
    } else {
      errorMessage.value = '网络错误，请检查您的连接'
    }
  } finally {
    loading.value = false
  }
}

// 邮箱格式验证
const validateEmail = (email) => {
  const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  return re.test(email)
}

// 更新密码
const updatePassword = async () => {
  // 验证密码
  if (!newPassword.value || !confirmPassword.value) {
    errorMessage.value = '请输入新密码'
    return
  }
  
  if (newPassword.value !== confirmPassword.value) {
    errorMessage.value = '两次输入的密码不一致'
    return
  }
  
  if (strength.value < 2) {
    errorMessage.value = '密码强度不足，请使用更复杂的密码'
    return
  }
  
  try {
    errorMessage.value = ''
    loading.value = true
    
    const requestData = {
      userId: userInfo.value.userId,
      password: newPassword.value
    }
    
    const response = await axios.put('/userpro/updatePassword', requestData)
    
    if (response.data === 1) {
      step.value = 3
    } else {
      errorMessage.value = '密码更新失败，请重试'
    }
  } catch (error) {
    if (error.response) {
      if (error.response.data && error.response.data.message) {
        errorMessage.value = '密码更新失败: ' + error.response.data.message
      } else {
        errorMessage.value = '密码更新失败: ' + error.message
      }
    } else {
      errorMessage.value = '网络错误，请检查您的连接'
    }
  } finally {
    loading.value = false
  }
}

// 返回登录页面
const goToLogin = () => {
  router.push('/login')
}
</script>

<style scoped>
.auth-container {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
}

.auth-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  z-index: -2;
}

.background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #4e6694 0%, #3b527a 50%, #1a2f54 100%);
  opacity: 0.85;
}

.math-formulas {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Times New Roman', serif;
}

/* 数学公式样式 */
.formula {
  position: absolute;
  color: rgba(255, 255, 255, 0.4);
  font-size: 32px;
  font-weight: 300;
  white-space: nowrap;
  pointer-events: none;
  animation: float-formula 15s ease-in-out infinite;
}

.formula-1 {
  top: 10%;
  left: 5%;
  font-size: 30px;
  animation-delay: 0s;
}

.formula-2 {
  top: 20%;
  right: 10%;
  font-size: 34px;
  animation-delay: 2s;
}

.formula-3 {
  top: 35%;
  left: 15%;
  font-size: 28px;
  animation-delay: 4s;
}

.formula-4 {
  top: 15%;
  left: 40%;
  font-size: 32px;
  animation-delay: 6s;
}

.formula-5 {
  top: 45%;
  right: 20%;
  font-size: 30px;
  animation-delay: 8s;
}

.formula-6 {
  top: 60%;
  left: 8%;
  font-size: 31px;
  animation-delay: 10s;
}

.formula-7 {
  top: 25%;
  right: 35%;
  font-size: 29px;
  animation-delay: 12s;
}

.formula-8 {
  top: 70%;
  left: 35%;
  font-size: 33px;
  animation-delay: 14s;
}

.formula-9 {
  top: 55%;
  right: 5%;
  font-size: 30px;
  animation-delay: 1s;
}

.formula-10 {
  top: 80%;
  left: 60%;
  font-size: 28px;
  animation-delay: 3s;
}

.formula-11 {
  top: 5%;
  right: 50%;
  font-size: 32px;
  animation-delay: 5s;
}

.formula-12 {
  top: 40%;
  left: 70%;
  font-size: 38px;
  animation-delay: 7s;
}

.formula-13 {
  top: 85%;
  right: 15%;
  font-size: 27px;
  animation-delay: 9s;
}

.formula-14 {
  top: 30%;
  left: 25%;
  font-size: 29px;
  animation-delay: 11s;
}

.formula-15 {
  top: 75%;
  right: 40%;
  font-size: 30px;
  animation-delay: 13s;
}

/* 数学符号样式 */
.math-symbol {
  position: absolute;
  color: rgba(255, 255, 255, 0.35);
  font-size: 80px;
  font-weight: 300;
  pointer-events: none;
  animation: float-symbol 12s ease-in-out infinite;
}

.symbol-1 {
  top: 12%;
  right: 25%;
  animation-delay: 1.5s;
}

.symbol-2 {
  top: 65%;
  left: 20%;
  animation-delay: 3.5s;
}

.symbol-3 {
  top: 35%;
  right: 8%;
  animation-delay: 5.5s;
}

.symbol-4 {
  top: 18%;
  left: 75%;
  animation-delay: 7.5s;
}

.symbol-5 {
  top: 50%;
  left: 5%;
  animation-delay: 9.5s;
}

.symbol-6 {
  top: 78%;
  right: 65%;
  animation-delay: 11.5s;
}

.symbol-7 {
  top: 8%;
  left: 60%;
  animation-delay: 2.5s;
}

.symbol-8 {
  top: 42%;
  right: 45%;
  animation-delay: 4.5s;
}

.symbol-9 {
  top: 88%;
  left: 15%;
  animation-delay: 6.5s;
}

.symbol-10 {
  top: 28%;
  left: 85%;
  animation-delay: 8.5s;
}

@keyframes float-formula {
  0% { 
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
  15% { 
    transform: translateY(-10px) rotate(1deg);
    opacity: 0.5;
  }
  30% { 
    transform: translateY(-15px) rotate(2deg);
    opacity: 0.6;
  }
  45% { 
    transform: translateY(-8px) rotate(-1deg);
    opacity: 0.4;
  }
  60% { 
    transform: translateY(-20px) rotate(1.5deg);
    opacity: 0.55;
  }
  75% { 
    transform: translateY(-12px) rotate(-0.5deg);
    opacity: 0.3;
  }
  90% { 
    transform: translateY(-5px) rotate(0.5deg);
    opacity: 0.1;
  }
  100% { 
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
}

@keyframes float-symbol {
  0% { 
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 0;
  }
  20% { 
    transform: translateY(-15px) rotate(3deg) scale(1.05);
    opacity: 0.4;
  }
  40% { 
    transform: translateY(-25px) rotate(5deg) scale(1.1);
    opacity: 0.5;
  }
  60% { 
    transform: translateY(-10px) rotate(-3deg) scale(0.95);
    opacity: 0.35;
  }
  80% { 
    transform: translateY(-18px) rotate(2deg) scale(1.02);
    opacity: 0.2;
  }
  95% { 
    transform: translateY(-5px) rotate(-1deg) scale(0.98);
    opacity: 0.05;
  }
  100% { 
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 0;
  }
}

.auth-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 550px;
  overflow: hidden;
  animation: slideInUp 0.6s ease-out;
  position: relative;
  backdrop-filter: blur(10px);
  z-index: 10;
}

.find-password-card {
  max-width: 580px;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.auth-header {
  background: linear-gradient(135deg, #4e6694 0%, #3b527a 100%);
  padding: 25px 30px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.auth-header::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  animation: rotate 20s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.logo-section {
  position: relative;
  z-index: 1;
}

.logo-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 12px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
}

.logo-icon svg {
  width: 24px;
  height: 24px;
  color: white;
}

.logo-text h1 {
  color: white;
  margin: 0 0 4px 0;
  font-size: 20px;
  font-weight: 600;
}

.logo-text p {
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  font-size: 13px;
}

/* 步骤指示器样式 */
.step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 30px;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  background: #e9ecef;
  color: #6c757d;
  transition: all 0.3s ease;
}

.step-item.active .step-circle {
  background: linear-gradient(135deg, #4e6694 0%, #3b527a 100%);
  color: white;
}

.step-item.completed .step-circle {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
}

.step-label {
  font-size: 11px;
  color: #6c757d;
  font-weight: 500;
}

.step-item.active .step-label {
  color: #4e6694;
  font-weight: 600;
}

.step-line {
  width: 40px;
  height: 2px;
  background: #e9ecef;
  margin: 0 16px;
  transition: background 0.3s ease;
}

.step-line.active {
  background: linear-gradient(135deg, #4e6694 0%, #3b527a 100%);
}

/* 表单样式 */
.auth-form {
  padding: 25px 30px 30px;
}

.step-content {
  animation: fadeInUp 0.4s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #1a2f54;
  font-size: 14px;
}

.input-wrapper {
  position: relative;
}

.form-input {
  width: 100%;
  padding: 14px 16px 14px 50px;
  border: 2px solid #e6e9ed;
  border-radius: 10px;
  font-size: 15px;
  transition: all 0.3s ease;
  background: #f8f9fa;
  box-sizing: border-box;
}

.form-input:focus {
  border-color: #4e6694;
  background: white;
  box-shadow: 0 0 0 3px rgba(78, 102, 148, 0.1);
  outline: none;
}

.input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  transition: color 0.3s ease;
}

.form-input:focus + .input-icon {
  color: #4e6694;
}

.input-icon svg {
  width: 20px;
  height: 20px;
}

.password-toggle {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: color 0.3s ease;
}

.password-toggle:hover {
  color: #4e6694;
}

.password-toggle svg {
  width: 20px;
  height: 20px;
}

/* 用户信息卡片 */
.user-info-card {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
  border: 2px solid #e9ecef;
}

.user-avatar {
  margin-right: 16px;
}

.user-avatar img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.user-details h3 {
  margin: 0 0 4px 0;
  color: #1a2f54;
  font-size: 16px;
  font-weight: 600;
}

.user-details p {
  margin: 0;
  color: #6b7280;
  font-size: 13px;
}

/* 密码强度指示器 */
.password-strength {
  margin: 12px 0 16px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.strength-bar {
  flex: 1;
  height: 6px;
  background-color: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.strength-fill {
  height: 100%;
  transition: all 0.3s ease;
  border-radius: 3px;
}

.strength-bar.weak .strength-fill {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

.strength-bar.medium .strength-fill {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.strength-bar.strong .strength-fill {
  background: linear-gradient(135deg, #10b981, #059669);
}

.strength-label {
  font-size: 12px;
  color: #6b7280;
  min-width: 50px;
  font-weight: 500;
}

/* 密码要求 */
.password-requirements {
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 24px;
  border: 1px solid #0ea5e9;
}

.password-requirements h4 {
  margin: 0 0 12px 0;
  color: #1a2f54;
  font-size: 14px;
  font-weight: 600;
}

.password-requirements ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.password-requirements li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  color: #6b7280;
  font-size: 13px;
  transition: color 0.3s ease;
}

.password-requirements li.valid {
  color: #059669;
}

.requirement-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
}

/* 按钮样式 */
.auth-button {
  padding: 14px 24px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.auth-button.primary {
  background: linear-gradient(135deg, #4e6694 0%, #3b527a 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(78, 102, 148, 0.3);
  width: 100%;
}

.auth-button.secondary {
  background: #f8f9fa;
  color: #6b7280;
  border: 2px solid #e9ecef;
  width: 100%;
  margin-bottom: 12px;
}

.auth-button:hover {
  transform: translateY(-2px);
}

.auth-button.primary:hover {
  box-shadow: 0 8px 25px rgba(78, 102, 148, 0.4);
}

.auth-button.secondary:hover {
  background: #e9ecef;
  color: #495057;
}

.button-overlay {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
}

.auth-button:hover .button-overlay {
  left: 100%;
}

.action-group {
  margin-top: 20px;
}

/* 成功页面 */
.success-content {
  text-align: center;
  padding: 20px 0;
}

.success-animation {
  margin-bottom: 24px;
}

.success-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  background: linear-gradient(135deg, #10b981, #059669);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: success-bounce 0.6s ease-out;
}

@keyframes success-bounce {
  0% { transform: scale(0); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.success-icon svg {
  width: 36px;
  height: 36px;
  color: white;
}

.success-content h2 {
  color: #1a2f54;
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 600;
}

.success-content p {
  color: #6b7280;
  margin: 0 0 24px 0;
  font-size: 14px;
}

/* 错误消息 */
.error-message {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  border: 1px solid #fca5a5;
  border-radius: 8px;
  color: #dc2626;
  font-size: 14px;
  margin-top: 16px;
}

.error-icon svg {
  width: 16px;
  height: 16px;
}

/* 页脚样式 */
.auth-footer {
  text-align: center;
  padding: 20px 30px 30px;
  color: #6b7280;
  font-size: 14px;
}

.auth-footer a {
  color: #4e6694;
  text-decoration: none;
  font-weight: 600;
  margin-left: 4px;
}

.auth-footer a:hover {
  text-decoration: underline;
}

/* 响应式设计 */
@media (max-width: 600px) {
  .auth-container {
    padding: 16px;
  }
  
  .auth-card {
    max-width: 100%;
  }
  
  .find-password-card {
    max-width: 100%;
  }
  
  .step-indicator {
    padding: 16px 20px;
  }
  
  .step-line {
    width: 24px;
    margin: 0 8px;
  }
  
  .auth-form {
    padding: 20px 24px 24px;
  }
  
  .auth-footer {
    padding: 16px 24px 24px;
  }
  
  .user-info-card {
    flex-direction: column;
    text-align: center;
  }
  
  .user-avatar {
    margin-right: 0;
    margin-bottom: 12px;
  }
  
  .formula {
    font-size: 26px;
  }
  
  .math-symbol {
    font-size: 64px;
  }
}

@media (max-width: 768px) {
  .formula {
    font-size: 28px;
  }
  
  .math-symbol {
    font-size: 72px;
  }
}
</style>